<template>
  <div>
    <h1>{{ user }}</h1>
    <h1>被getter方法修改+15后值为：{{ changedAge }}</h1>
    <button v-on:click="addAge()">增加年龄</button>
    <button v-on:click="AsyncAddAge()">延时增加</button>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { mapGetters } from 'vuex'
import { mapMutations } from 'vuex'
import { mapActions } from 'vuex'
export default {
  name: 'HelloWorld',
  props: {

  },
  data(){
    return {

    }
  },
  // mapState函数
  // 通过计算属性，直接把store中的属性，提取到本地，类似于this.user = $store.state.user
  computed: {
    ...mapState(['user'])
    ,
    ...mapGetters(['changedAge'])
  },
  methods:{
    // 对store的操作函数
    // 扩展成athis.addAge()方法
    ...mapMutations({
      addAge: 'increment',

    }),
    ...mapActions({
      AsyncAddAge:'incrementAsync'
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
